<script type="text/javascript">
    var ctx = window.location.origin;
</script>
<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>提交申请</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <style type="text/css">
            .am-header-nav input[type="button"] {
                background-color: transparent;
                border: none;
                color: #4690d9
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MYRycSj3ZK1WZdLYEtzi2BDG"></script>
    </head>
    <body>
        <form action="" class="am-form" id="form-with-tooltip">
            <header data-am-widget="header" class="am-header am-header-default am-header-fixed">
                <div class="am-header-left am-header-nav">
                    <a class="btn-icon" href="usercenter.html">
                    <i class="icon icon-arrow-left"></i>
                    </a>
                </div>
                <h1 class="am-header-title">
                    提交申请
                </h1>
                <!--<div class="am-header-right am-header-nav">-->
                    <!--<input type="button" onclick="changeAccounts()"value="确认">-->
                <!--</div>-->
            </header>
            <ul class="am-list">
                <li>
                    <div class="item-inner">
                        <div class="am-form-group">
                            <label for="contact" class="widget-name am-u-sm-4">联系人</label>
                            <div class="am-u-sm-8 am-u-sm-right">
                                <input id="contact" type="text" name="联系人" placeholder="请输入" data-foolish-msg="请输入提现账号！" >
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-inner">
                        <div class="am-form-group">
                            <label for="phone" class="widget-name am-u-sm-4">联系电话</label>
                            <div class="am-u-sm-8 am-u-sm-right">
                                <input id="phone" type="text" name="联系电话" placeholder="请输入" data-foolish-msg="请输入提现账号！" >
                            </div>
                        </div>
                    </div>
                </li>
                <div class="am-form-group" style="text-align:left;">
                    <label style="margin-left: 10px;margin-top: 10px;" for="hospitalAddressSelect">选择区域</label>
                    <div class="am-form-field" id="hospitalAddressSelect">
                        <select data-am-selected="{btnWidth: '32%',btnSize: 'sm',maxHeight: 400}" id="province"
                                onchange="getCity(document.getElementById('province').value)">
                        </select>
                        <select data-am-selected="{btnWidth: '32%',btnSize: 'sm',maxHeight: 400}" id="city"
                                onchange="getDistricts(document.getElementById('city').value)">
                        </select>
                        <select data-am-selected="{btnWidth: '32%',btnSize: 'sm',maxHeight: 400}" id="district">
                        </select>
                    </div>
                </div>
                <li>
                    <div class="am-g">
                        <div class="am-u-md-12">
                            <div class="edit-box">
                                <form class="am-form">
                                    <br>
                                    <div id="uploadImg" class="uploadImg" style="margin-top:0.8rem">
                                       <span id="imgAdd" onclick="addPhoto()"><img src="images/add.jpg"></span>
                                        <input  style="display: none;" id="imageInput" type="file"/>
                                        <!--<span><img src="../assets/images/pic04.jpg"><i class="at-remove"></i></span>-->
                                        <!--<span><img src="../assets/images/pic04.jpg"><i class="at-remove"></i></span>-->

            </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-inner">
                        <div class="am-form-group">
                            <label for="address" class="widget-name am-u-sm-4">加盟店地址</label>
                            <div class="am-u-sm-8 am-u-sm-right">
                                <input id="address" type="text" name="请输入" placeholder="请输入地址" data-foolish-msg="请输入地址" required>
                                <input type="button" onclick="getLocation();" class="am-btn am-btn-primary am-btn-block am-margin-block" value="地图定位" name="">
                            </div>
                        </div>
                    </div>
                </li>
                <li style="height:100%;display:none;" id="allmap"></li>
                <input type="button" onclick="createInitOrder();" style="position: fixed;top:93%;" class="am-btn am-btn-primary am-btn-block am-margin-block" value="提交申请" name="">
            </ul>
        </form>
        <!--[if lt IE 9]>
        <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
        <script src="http:/js/polyfill/rem.min.js"></script>
        <script src="http://libs.useso.com/js/respond.js/1.4.2/respond.min.js"></script>
        <script src="http://cdn.amazeui.org/amazeui/2.1.0/js/amazeui.legacy.min.js"></script>
        <![endif]-->

        <!--[if (gte IE 9)|!(IE)]><!-->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <!--<![endif]-->
        <script src="dist/js/swiper.min.js"></script>
        <script src="assets/js/app.js"></script>
        <script type="text/javascript">
            var photos=new Array();
            function addPhoto(){
                if(photos.length>=5){
                    alert("最多上传5张照片");
                }else{
                    document.getElementById('imageInput').click();
                }

            }
            function deletePhoto(photo){
                var removeIndex=null;
                for(var i in photos){
                    if(photos[i]==$(photo).attr('photoId')){
                        removeIndex=i;
                    }
                }

                photos.splice(removeIndex,1);
                console.log(photos);
                $(photo).parent().remove();
            }
            $('#imageInput').on('change', function () {
                var fileNames = '';

                $.each(this.files, function () {
                    var formData = new FormData();
                    formData.append("image",this);
//        console.log(formData);
//        console.log($("#doc-vld-name").val());
                    $.ajax({
                        //提交数据的类型 POST GET
                        type: "POST",
                        //提交的网址
                        url: ctx + '/photos/uploadPhoto',
                        //提交的数据
                        data: formData,
                        processData : false,
                        contentType : false,
                        //返回数据的格式
                        datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
                        //成功返回之后调用的函数
                        success: function (data) {
                            var span=$('<span><img src="'+ctx + '/photos/getPhoto?photoId='+data.data.photoId+'&width=200&height=200" ><i photoId="'+data.data.photoId+'" class="at-remove" onclick="deletePhoto(this)"></i></span>');
                            span.insertBefore('#imgAdd');
                            span.children('img').height(span.children('img').width());
                            photos.push(data.data.photoId);
                        },
                        //调用出错执行的函数
                        error: function () {
                            //请求出错处理

                        }
                    });
                });
            });
            var submitLat=null;
            var submitLng=null;
            $(document).ready(function () {
                getProvinces();
                getLocation();
            })
            function getProvinces() {
                $.ajax({url: ctx + "/nation/getProvinces?addAll=false",
                    success: function (data) {
                        var content = "<option value=''></option>";
                        for (var i = 0; i < data.length; i++) {
//                console.log(data[i])
                            content += '<option value="' + data[i][0] + '">' + data[i][1] + '</option>'
                        }
                        $('#province').html(content)
//                        $('#province').change();
                    }});
            }

            function getCity(provinceCode) {
                if(''!=provinceCode){
                    $.ajax({url: ctx + "/nation/getCities?code=" + provinceCode + "&addAll=false",
                        success: function (data) {
                            var content = "";
                            for (var i = 0; i < data.data.length; i++) {
                                content += '<option value="' + data.data[i][0] + '">' + data.data[i][1] + '</option>'
                            }
                            $('#city').html(content)
//                            $('#city').change();
                        }});
                }
            }

            function getDistricts(cityCode) {
                if(''!=cityCode){
                    $.ajax({url: ctx + "/nation/getDistricts?code=" + cityCode + "&addAll=false",
                        success: function (data) {
                            var content = "";
                            for (var i = 0; i < data.data.length; i++) {
                                content += '<option value="' + data.data[i][0] + '">' + data.data[i][1] + '</option>'
                            }
                            $('#district').html(content)
                        }});
                }
            }
            function request(paramName) {
                //获取URL的字符串
                var sSource = String(window.document.location);
                var sName = paramName;
                var sReturn = "";
                var sQUS = "?";
                var sAMP = "&";
                var sEQ = "=";
                var iPos;

                //获取sSource中的"?"，无则返回 -1
                iPos = sSource.indexOf(sQUS);
                if (iPos == -1)
                    return;

                //汲取参数，从iPos letters 置到sSource.length-iPos的 letters 置，
                //若iPos = -1，则：从-1 到 sSource.length+1
                var strQuery = sSource.substr(iPos, sSource.length - iPos);

                // alert(strQuery);
                //先全部转换为小写
                var strLCQuery = strQuery.toLowerCase();
                var strLCName = sName.toLowerCase();

                //从子字符串strLCQuery中查找“?”、参数名，以及“=”，即“?参数名=”
                iPos = strLCQuery.indexOf(sQUS + strLCName + sEQ);
                //alert(iPos);
                //如果不存在
                if (iPos == -1) {
                    //继续查找可能的后一个参数，即带“&参数名=”
                    iPos = strLCQuery.indexOf(sAMP + strLCName + sEQ);
                }

                //判断是否存在参数
                if (iPos != -1) {
                    sReturn = strQuery.substr(iPos + sName.length + 2, strQuery.length - (iPos + sName.length + 2));
                    var iPosAMP = sReturn.indexOf(sAMP);
                    if (iPosAMP == -1) {
                        return sReturn;
                    }
                    else {
                        sReturn = sReturn.substr(0, iPosAMP);
                    }
                }
                return sReturn;
            }
            function Rad(d) {
                return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
            }

            function GetDistance(lat1, lng1, lat2, lng2) {

                var radLat1 = Rad(lat1);
                var radLat2 = Rad(lat2);
                var a = radLat1 - radLat2;
                var b = Rad(lng1) - Rad(lng2);
                var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
                s = s * 6378.137;// EARTH_RADIUS;
                s = Math.round(s * 10000) / 10000; //输出为公里
                //s=s.toFixed(4);
                return s;
            }
            var radius=1.0;
            var map = new BMap.Map("allmap");
            //    var point = new BMap.Point(116.331398,39.897445);
            //    map.centerAndZoom(point,14);
            //    map.centerAndZoom("上海",14);
            var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
            map.addControl(top_left_control);
            map.enableScrollWheelZoom();
            //单击获取点击的经纬度
            var marker = null;
            var circle = null;
            var point = new BMap.Point(131, 22);
            var myIcon = new BMap.Icon(ctx+'/images/icon_location.png', new BMap.Size(40, 40), {
                offset: new BMap.Size(0, 0),
                imageOffset: new BMap.Size(0, 0)
            });
            var storeIcon = new BMap.Icon(ctx+'/images/icon_store.png', new BMap.Size(40, 40), {
                offset: new BMap.Size(0, 0),
                imageOffset: new BMap.Size(0, 0)
            });
            var likeIcon = new BMap.Icon(ctx+'/images/icon_like.png', new BMap.Size(40, 40), {
                offset: new BMap.Size(0, 0),
                imageOffset: new BMap.Size(0, 0)
            });
            var builtIcon = new BMap.Icon(ctx+'/images/icon_built.png', new BMap.Size(40, 40), {
                offset: new BMap.Size(0, 0),
                imageOffset: new BMap.Size(0, 0)
            });
            var buildIcon = new BMap.Icon(ctx+'/images/icon_build.png', new BMap.Size(40, 40), {
                offset: new BMap.Size(0, 0),
                imageOffset: new BMap.Size(0, 0)
            });

            if (null == marker) {
                marker = new BMap.Marker(point, {icon: myIcon});// 创建标注
                circle = new BMap.Circle(point, radius, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); //创建圆
            } else {
                marker.setPosition(point);
                circle.setCenter(point);
            }
            map.centerAndZoom(point, 14);
            map.addOverlay(marker);             // 将标注添加到地图中
            map.addOverlay(circle);             // 将标注添加到地图中
            marker.disableDragging();
            //    map.addEventListener("click",function(e){
            ////        alert(e.point.lng + "," + e.point.lat);
            //        var point = new BMap.Point(e.point.lng,e.point.lat);
            //        if (null==marker) {
            //            marker = new BMap.Marker(point);// 创建标注
            //            circle = new BMap.Circle(point,radius,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
            //        }else{
            //            marker.setPosition(point);
            //            circle.setCenter(point);
            //        }
            //        map.addOverlay(marker);             // 将标注添加到地图中
            //        map.addOverlay(circle);             // 将标注添加到地图中
            //        marker.disableDragging();
            //        parent.Ext.getCmp('addressResponse.lng').setValue(e.point.lng)
            //        parent.Ext.getCmp('addressResponse.lat').setValue(e.point.lat)
            //    });
            function theLocation(city) {
//        var city = document.getElementById("cityName").value;
                if (city != "") {
                    map.centerAndZoom(city, 18);      // 用城市名设置地图中心点
                }
            }

            //    theLocation(province+city+district+centerAddress)
//            $('#buildingName').html(decodeURI(buildingName));
            function getLocation(func){
                $('#allmap').show();
                console.log(document.getElementById('province').value)
                console.log(document.getElementById('city').value)
                console.log(document.getElementById('district').value)
                if(''!=document.getElementById('province').value
                    &&''!=document.getElementById('city').value
                    &&''!=document.getElementById('district').value){
                    map.enableScrollWheelZoom();
                    var myGeo = new BMap.Geocoder();
                    var addressString=$('option[value='+document.getElementById('city').value+']').html();
                    addressString+=$('option[value='+document.getElementById('district').value+']').html();
                    addressString+=document.getElementById('address').value;
                    console.log(addressString);
                    myGeo.getPoint(addressString, function(point){
                        var lng=null;
                        var lat=null;
                        if (point) {
                            submitLat=point.lat;
                            submitLng=point.lng;
//                        Ext.getCmp('mapPanel').setVisible(true);
                            map.centerAndZoom(point, 16);
//                            marker=new BMap.Marker(point,{icon: myIcon});
//                            map.addOverlay(marker);
                            var point = new BMap.Point(point.lng,point.lat);
                            if (null==marker) {
                                marker = new BMap.Marker(point,{icon: myIcon});// 创建标注
                            }else{
                                marker.setPosition(point);
                            }
                            map.addOverlay(marker);             // 将标注添加到地图中
                            marker.disableDragging();
//                            getNearbyStoresByLatLng(map);
                            if(undefined!=func){
                                func();
                            }
//                        Ext.getCmp('addressResponse.lat').setValue(point.lat);
//                        Ext.getCmp('addressResponse.lng').setValue(point.lng);
                        }
                    }, $('option[value='+document.getElementById('city').value+']').html());
                }else{
                    if(''==document.getElementById('province').value
                        &&''==document.getElementById('city').value
                        &&''==document.getElementById('district').value
                        &&''==document.getElementById('address').value){
                        map.enableScrollWheelZoom();
                        var myGeo = new BMap.Geocoder();
                        var geolocation = new BMap.Geolocation();
                        geolocation.getCurrentPosition(function(r){
                            console.log(r);
                            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                                submitLat=r.point.lat;
                                submitLng=r.point.lng;
//                        Ext.getCmp('mapPanel').setVisible(true);
                                map.centerAndZoom(r.point, 16);
                                var point = new BMap.Point(r.point.lng,r.point.lat);
                                if (null==marker) {
                                    marker = new BMap.Marker(point,{icon: myIcon});// 创建标注
                                }else{
                                    marker.setPosition(point);
                                }
                                map.addOverlay(marker);
//                                getNearbyStoresByLatLng(map);// 将标注添加到地图中
                                marker.disableDragging();
                            }
                            else {
                                alert('failed'+this.getStatus());
                            }
                        },{enableHighAccuracy: true})
                    }else{
                        alert('您有区域项未选择,请选择')
                    }
                }


                map.addEventListener("click",function(e){
//        alert(e.point.lng + "," + e.point.lat);
                    var point = new BMap.Point(e.point.lng,e.point.lat);
                    if (null==marker) {
                        marker = new BMap.Marker(point,{icon: myIcon});// 创建标注
                    }else{
                        marker.setPosition(point);
                    }
                    map.addOverlay(marker);             // 将标注添加到地图中
                    marker.disableDragging();
                    submitLat=e.point.lat;
                    submitLng=e.point.lng;
                });
            }
            function createInitOrder(){
                if(''==document.getElementById('address').value){
                    alert('请填写加盟店地址')
                    return;
                }
                if(null==submitLat){
                    alert('请先定位')
                    return;
                }
                if(photos.length==0){
                    alert('请至少上传一张照片')
                    return;
                }
                $.ajax({
                    type:"POST",
                    url:ctx+"/requestOrder/createInitOrder",
                    data:{
                        uuid:request("uuid"),
                        contactName: $("#contact").val(),
                        phone:$("#phone").val(),
                        lat: submitLat,
                        lng: submitLng,
                        address: $("#address").val(),
                        nationCode: document.getElementById('district').value,
                        createPhotos:photos.join(",")
                    },
                    datatype:"json",
                    success:function(response){
                        if(response.success){
                            alert("提交成功!");
                        }else {
                            alert(response.error_description);
                        }
                    },
                    error:function(){
                    }
                })
//                getLocation(function(){
//                    console.log(photos);
//
//                })

            }

            function getNearbyStoresByLatLng(map){
                $.ajax({
                    type:"GET",
                    url:ctx+"/settings/getNearbyStoresByLatLng",
                    data:{
                        lat:submitLat,
                        lng:submitLng,
                    },
                    datatype:"json",
                    success:function(response){
                        if(response.success){
                            var data=response.data;
                            for(var i in data){
//                                var map = new BMap.Map("allmap");
                                var point=data[i];
                                var status=point.status;
                                var type=point.type;
                                var lat=point.lat;
                                var lng=point.lng;
                                var point2 = new BMap.Point(lng,lat);
                                var marker = null;
//                                if('intention'!=type){
//                                    if('requireSign'==status){
//                                        marker = new BMap.Marker(point2, {icon: builtIcon});
//                                    }else if('requireAudit'==status){
//                                        marker = new BMap.Marker(point2, {icon: storeIcon});
//                                    }
//                                }else{
//                                    marker = new BMap.Marker(point2, {icon: likeIcon});
//                                }
                                if('order'==type){
                                    marker = new BMap.Marker(point2, {icon: storeIcon});
                                }else if('store'==type){
                                    marker = new BMap.Marker(point2, {icon: builtIcon});
                                }else if('intention'==type){
                                    marker = new BMap.Marker(point2, {icon: likeIcon});
                                }else if('build'==type){
                                    marker = new BMap.Marker(point2, {icon: buildIcon});
                                }
                                // 创建标注
                                marker.setPosition(point2);
                                map.addOverlay(marker);
                            }
                        }else {
                            alert(response.error_description);
                        }
                    },
                    error:function(){
                    }
                })
            }
        </script>
    </body>
</html>
